<html>
<head>
	<#import "common/common.ftl" as netCommon>
  	<@netCommon.commonStyle />
  	<title>${config.systemTitle}</title>
  	<@netCommon.commonScript />
  	<@netCommon.commonLayui />
  	<script src="${request.contextPath}/static/plugins/echars/echarts.min.js"></script>
</head>
<body class="layui-layout-body show-scroll-y">
	<div class="layui-fluid">
		<div class="layui-row layui-col-space5">
			<div class="layui-col-xs9">
				<div class="layui-card">
					<div class="layui-card-header">
						各单位档案情况
					</div>
					<div class="layui-card-body" >
						<div class="layadmin-carousel layadmin-backlog card-body-overflow-y" style="height: 270px;">
							<div carousel-item id="gdwdaqkUl">
								<i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3">
				<div class="layui-card">
					<div class="layui-card-header">
						总体情况
					</div>
					<div class="layui-card-body">
						<div class="layadmin-carousel layadmin-backlog card-body-overflow-y" style="height: 270px;">
							<div carousel-item id="ztqkUl">
								<i class="layui-icon layui-icon-loading-1 layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i> 加载中...
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-row layui-col-space5">
			<div class="layui-col-xs12">
				<div class="layui-card">
					<div class="layui-card-header">
						概览
					</div>
					<div class="layui-card-body">
						<div id="glEChars" style="width: 100%;height:100%"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/html" id="ztqkTmp">
	{{#  if(d.code == "0"){ }}
	<ul  class="layui-row layui-col-space10 layui-this">
	{{#  layui.each(d.data, function(index, item){ }}
		<li class="layui-col-xs6">
			<a class="layadmin-backlog-body">
			   <h3>{{ item.title }}</h3>
			   <p><cite>{{ item.num }}</cite></p>
			</a>
		</li>
	{{#  }); }}
	</ul>
	{{# }else{ }}
		{{ d.msg }}
	{{# } }}
	</script>
	<script type="text/html" id="gdwqkTmp">
	{{#  if(d.code == "0"){ }}
	<ul class="layui-row layui-col-space10 layui-this">
	{{#  layui.each(d.data, function(index, item){ }}
		<li class="layui-col-xs2">
			<a class="layadmin-backlog-body">
				<h3>{{ item.title }}</h3>
				<p><cite>{{ item.num }}</cite></p>
			</a>
		 </li>
	{{#  }); }}
		{{ d.msg }}
	{{# } }}
	</ul>
	</script>
	<script type="text/javascript">
	layui.use('laytpl', function(){
		var laytpl = layui.laytpl;
		initZtqk(laytpl);
		initGdwqk(laytpl);
		
		$.ajax({
			url: basePath+"/glechars",
			type: "post",
			dataType: "json",
			success: function(data){
				if(data.code == "0"){
					var ssjgTitle = [];
					var daslVal = [];
					for(var i in data.data){
						var n = data.data[i].num;
						n = !n ? 0:n;
						ssjgTitle.push(data.data[i].title);
						daslVal.push(n);
					}
					var option = {
						    xAxis: {
						        type: 'category',
						        data: ssjgTitle
						    },
						    yAxis: {
						        type: 'value'
						    },
						    series: [{
						        data: daslVal,
						        type: 'bar',
						        showBackground: true,
						        backgroundStyle: {
						            color: 'rgba(180, 180, 180, 0.2)'
						        },
						        itemStyle: {
					                color: new echarts.graphic.LinearGradient(
					                    0, 0, 0, 1,
					                    [
					                        {offset: 0, color: '#83bff6'},
					                        {offset: 0.5, color: '#188df0'},
					                        {offset: 1, color: '#188df0'}
					                    ]
					                )
					            }
						    }]
						};
						var chartDom = document.getElementById('glEChars');
						var myChart = echarts.init(chartDom);
						myChart.setOption(option);
				}
			}
		});
		
	});
	
	function initZtqk(laytpl){
		$.ajax({
			url: basePath+"/ztqkList",
			type: "post",
			dataType: "json",
			success: function(data){
				var ztqTmpC = $("#ztqkTmp").html();
				laytpl(ztqTmpC).render(data, function(html){
					$("#ztqkUl").html(html);
				});
			}
		});
	}
	function initGdwqk(laytpl){
		$.ajax({
			url: basePath+"/gdwqkList",
			type: "post",
			dataType: "json",
			success: function(data){
				var gdwqkTmpC = $("#gdwqkTmp").html();
				laytpl(gdwqkTmpC).render(data, function(html){
					$("#gdwdaqkUl").html(html);
				});
			}
		});
	}
	</script>
</body>
</html>